<template>
    <div>
        <let-form ref="addForm" inline itemWidth="400px" @submit.native.prevent="addItem">
            <let-form-item :label="$t('gateway.gatewayObj')" required>
                <let-input size="small" 
                v-model="form.gatewayObj"
                placeholder="eg:Base.GatewayServer.FlowControlObj"
                required
                required-tip="please input gateway flowcontrol obj"
                ></let-input>
            </let-form-item>
            <let-form-item>
                <let-button size="small" type="submit" theme="primary">{{$t('operate.add')}}</let-button>
            </let-form-item>
            <let-form-item></let-form-item>
        </let-form>
        <let-table ref="table" :data="objList" :empty-msg="$t('common.nodata')">
            <let-table-column :title="$t('gateway.gatewayObj')" prop="obj"></let-table-column>
            <let-table-column :title="$t('operate.operates')" width="200px">
                <template slot-scope="scope">
                    <let-table-operation @click="emitConfig(scope.row)">{{$t('operate.config')}}</let-table-operation>
                    <let-table-operation @click="removeItem(scope.row)">{{$t('operate.delete')}}</let-table-operation>
                </template>
            </let-table-column>
        </let-table>
    </div>
</template>
<script>
export default {
    name:"GatewayObjList",
    props: {
    },
    data(){
        return {
            form:{
                gatewayObj:""
            },
            items: [],
            gatewayObjList:[],
        }
    },
    methods:{
        fetchData() {
            //const loading = this.$refs.table.$loading.show();
            return this.$ajax.getJSON('/gateway/api/gatewayobj_list', {}).then((data) => {
                //loading.hide();
                this.gatewayObjList = data
            }).catch((err) => {
                //loading.hide();
                this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
            });
        },
        emitConfig(row){
            localStorage.setItem("gatewayObj", row.obj)
            this.$emit("config", row.obj)
        },
        addItem(){
            if (this.$refs.addForm.validate()) {
                const model = this.form;
    
                const url ='/gateway/api/add_gatewayobj';
                const loading = this.$Loading.show();
                this.$ajax.postJSON(url, model).then(() => {
                    loading.hide();
                    this.$tip.success(this.$t('common.success'));
                    this.form.gatewayObj = ""
                    this.fetchData();
                }).catch((err) => {
                    loading.hide();
                    this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
                });
            }
        },
        removeItem(item){
            this.$confirm("delete this gateway?", this.$t('common.alert')).then(() => {
                const loading = this.$Loading.show();
                this.$ajax.postJSON('/gateway/api/delete_gatewayobj', {gatewayObj: item.obj}).then(() => {
                    loading.hide();
                    this.fetchData().then(() => {
                        this.$tip.success(this.$t('common.success'));
                    });
                }).catch((err) => {
                    loading.hide();
                    this.$tip.error(`${this.$t('common.error')}: ${err.message || err.err_msg}`);
                });
            }).catch(() => {});
        }
    },
    computed: {
        objList(){
            return this.gatewayObjList.map((item)=>{
                return {obj: item}
            })
        }
    },
    watch: {
    },
    mounted() {
        this.fetchData();
    },
}
</script>
<style scoped lang="postcss">

</style>